<template>
  <div class="sidebar_box">
    <template v-if="!arrRef"> <Loading></Loading></template>

    <template v-else>
      <li
        v-for="item in arrRef"
        :key="item.id"
        :class="{ active: item.isClick ? true : false }"
        @click="clickfn(item.id)"
      >
        {{ item.name }}
      </li></template
    >
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import { Axios } from "../../axios";
import Loading from "../loading";
export default {
  components: { Loading },
  setup(prop, ctx) {
    //数据声明
    let arrRef = ref(null);

    //钩子函数
    onMounted(() => {
      // 服务器获取数据
      // 做缓存
      async function fn() {
        let label_wz = sessionStorage.getItem("label_wz");
        if (label_wz) {
          arrRef.value = JSON.parse(label_wz);
        } else {
          let arr = (await Axios({ method: "get", url: "/label/getLabel" }))
            .data.ins;

          arr.map((it, i) => {
            if (i == 0) {
              it.isClick = true;
            } else {
              it.isClick = false;
            }
          });
          arrRef.value = arr;
          sessionStorage.setItem("label_wz", JSON.stringify(arr));
        }
      }
      fn();
    });

    let clickfn = (e) => {
      arrRef.value.map((it, i) => {
        if (i == e - 1) {
          it["isClick"] = true;
          if (it.name == "全部") {
            sessionStorage.setItem("item", "");
          } else {
            sessionStorage.setItem("item", it.name);
          }
        } else {
          it["isClick"] = false;
        }
      });
      ctx.emit("hashchange", sessionStorage.getItem("item"));
    };

    //数据返回
    return {
      arrRef,
      clickfn,
    };
  },
};
</script>
<style lang="less">
@import url("../../assets/global/var.less");
.sidebar_box {
  min-width: 200px;
  min-height: 300px;
  padding: 10px;
  position: relative;

  .active {
    color: @navigation_bar_content_active_color;
  }
  li {
    text-align: center;
    list-style: none;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
  }
}
</style>